<template>
  <div class="app-container" style="display: flex;gap: 10px;box-sizing: border-box;height: 95vh;">
    <el-card style="width: 70%">
      <el-button type="primary" icon="el-icon-upload2" size="mini">批量上传</el-button>
      <div style="display: flex;align-items: center;gap: 5px;margin-top: 10px;">
        <!-- 搜索 -->
        <label class="el-form-item-label">客户</label>
        <el-input v-model="query.customerName" clearable placeholder="客户" style="width: 120px;" class="filter-item" @keyup.enter.native="toQuery" />
        <label class="el-form-item-label">料号</label>
        <el-input v-model="query.productNo" clearable placeholder="料号" style="width: 120px;" class="filter-item" @keyup.enter.native="toQuery" />
        <label class="el-form-item-label">良品/不良品</label>
        <el-input v-model="query.quality" clearable placeholder="良品/不良品" style="width: 120px;" class="filter-item" @keyup.enter.native="toQuery" />
        <div>
          <el-button type="success" size="mini" icon="el-icon-search">搜索</el-button>
          <el-button type="warning" size="mini" icon="el-icon-refresh">重置</el-button>
        </div>
      </div>
      <el-table
        ref="tableTable"
        :data="list"
        style="width: 100%"
        @select="handlerMaterialChange"
        @select-all="handlerMaterialAll"
        @selection-change="updateMaterialSelect"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="productNo" label="料号" />
        <el-table-column prop="customerName" label="客户" />
        <el-table-column prop="qty" label="数量" />
        <el-table-column prop="quality" label="良品/不良品" />
        <el-table-column prop="storageCode" label="储位" />
      </el-table>
      <el-pagination
        current-page.sync="1"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="1"
        @size-change="handlerSize"
        @current-change="handlerCurrent"
      />
    </el-card>
    <el-card style="width: 30%">
      <div slot="header" class="clearfix">
        <span>已勾选物料</span>
        <el-button style="float: right;" type="primary" @click="createOutBoundOrder">创建出库单</el-button>
      </div>
      <el-table ref="selectStorageTable" :data="select_table" size="small" style="width: 100%;">
        <el-table-column prop="productNo" label="料号" />
        <el-table-column label="操作" width="100px" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="deleteProduction(scope.row, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getMaterialListAPI, createOrderAPI } from '@/api/work/outBoundCreate'
export default {
  name: 'OutBoundCreate',
  data() {
    return {
      list: [],
      query: {
        current: 1,
        size: 10
      },
      totalElements: 0,
      select_table: []
    }
  },
  mounted() {
    this.toQuery()
  },
  methods: {
    toQuery() {
      this.query.current = 1
      this.getList()
    },
    async getList() {
      const res = await getMaterialListAPI(this.query)
      this.list = res.content
      this.totalElements = res.totalElements
      this.select_table.forEach(item => {
        this.$nextTick(() => {
          this.list.find(obj => {
            if (item.productNo === obj.productNo) {
              this.$refs.tableTable.toggleRowSelection(obj, true)
            }
          })
        })
      })
    },
    // el-table
    // 单选取消
    handlerMaterialChange(selection, row) {
      let a = 0
      selection.forEach(v => {
        if (v.productNo !== row.productNo) {
          a++
        }
      })
      if ((a !== 0 && selection.length !== 0) || (a === 0 && selection.length === 0)) {
        this.select_table.forEach((v, index) => {
          if (v.productNo === row.productNo) {
            this.select_table.splice(index, 1)
          }
        })
      }
    },
    // 全选取消
    handlerMaterialAll(val) {
      if (val.length === 0) {
        const set2 = new Set(this.select_table.map(v => v.productNo))
        const a = this.select_table.map(v => v.productNo).filter(item => !set2.has(item))
        const b = this.select_table.filter(v => a.includes(v.productNo))
        this.select_table = b
      }
    },
    // 更新到select_table中
    updateMaterialSelect(val) {
      for (var i = 0; i < val.length; i++) {
        const n = {
          productNo: val[i].productNo,
          customerName: val[i].customerName,
          qty: val[i].qty,
          quality: val[i].quality,
          storageCode: val[i].storageCode
        }
        if (this.select_table.length === 0) {
          this.select_table.push(n)
        } else {
          let a = 0
          for (var j = 0; j < this.select_table.length; j++) {
            if (this.select_table[j].productNo === val[i].productNo) {
              a++
            }
          }
          if (a < 1) {
            this.select_table.push(n)
          }
        }
      }
    },
    deleteProduction(row, index) {
      this.select_table.splice(index, 1)
      this.$nextTick(() => {
        this.list.find(obj => {
          if (obj.productNo === row.productNo) {
            this.$refs.tableTable.toggleRowSelection(obj, false)
          }
        })
      })
    },
    // 分页相关
    handlerSize(newSize) {
      this.query.size = newSize
      this.query.current = 1
      this.getList()
    },
    handlerCurrent(newCurrent) {
      this.query.size = newCurrent
      this.getList()
    },
    async createOutBoundOrder() {
      const res = await createOrderAPI(this.select_table)
      if (res.result === 'OK') {
        this.$message.success('创建成功')
        this.$router.push('/outBoundManagement/outBoundOrder')
      } else {
        this.$message.warning(res.data)
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
